<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>helloworld</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">{{content}}</div>
  
  <script>
    // var dom = document.getElementById("app");
    // dom.innerHTML='hello world';

    var vue = new Vue({ //创建一个Vue的实例
      el: '#app',   // 实例负责管理的区域是 #app，即让Vue实例接管#app的dom标签里的内容
      data: {
        content: 'hello world!!!1123'
      }
    }) 
    // 创建Vue实例后，就不需要关注Dom操作上，而把精力放在data的处理上

    setTimeout(function (){
      vue.$data.content = 'bye world';
    }, 2000);
  </script>
</body>
</html>